import React, {Fragment, useState, useEffect} from 'react'
import {Divider, Popup, SideBar, CheckList} from 'antd-mobile'
import {Flex} from 'antd'
import {RightOutline, CheckCircleFill} from 'antd-mobile-icons'

import {sortList} from './constant/CategoriesList'

import problemPick from './index.module.css'


function ProblemPick() {

    //pop
    const [visible, setVisible] = useState(false)
    //大类选中状态
    const [curryActive, setActiveKey] = useState('0')
    //小类当前数据
    const [curryData, setData] = useState([])
    //点击小类
    const [itemData, selectData] = useState('请点击选择')

    //[]空数组相当于componentDidMount
    useEffect(() => {
        clickSideBar('0')
        //返回的函数相当于unmountComponentAtNode
        return () => {

        }
    }, []);

    function clickSideBar(selectKey) {
        //切换item
        setActiveKey(selectKey)
        //更新数据
        let item = sortList.filter(item => {
            return item.key === selectKey
        })
        setData(item[0].data)
    }

    function closeMask() {
        setVisible(false)
    }

    function showPopup() {
        setVisible(true)
    }

    function clickCheckListItem(itemArray) {
        if (itemArray.length === 0) {
            selectData('请点击选择')
        } else {
            selectData(itemArray[0])
        }
        closeMask()
    }

    return (<Fragment>
        <div className={problemPick.container}>
            <Flex gap="small" justify='space-between' onClick={showPopup}>
                <span>问题类型:</span>
                <div>
                    <span>{itemData === null ? '请点击选择' : itemData}</span>
                    <RightOutline/>
                </div>
            </Flex>
            <Divider/>
            <Popup
                showCloseButton
                bodyStyle={{borderTopLeftRadius: '8px', borderTopRightRadius: '8px', maxHeight: '60vh',}}
                visible={visible}
                onClose={closeMask}
                onMaskClick={closeMask}>
                <Flex className={problemPick.sideBar} gap="small" justify='flex-start'>
                    <SideBar activeKey={curryActive} onChange={clickSideBar}
                             style={{'--width': '120px', '--height': '100%', 'fontSize': '13px'}}>
                        {sortList.map(item => (<SideBar.Item key={item.key} title={item.title}/>))}
                    </SideBar>
                    <div style={{width: '100%', height: '60vh', overflowY: 'scroll', padding: '5px'}}>
                        <CheckList
                            extra={active => active ? <CheckCircleFill/> : ''}
                            onChange={clickCheckListItem} className={problemPick.myCheckList}>
                            {curryData.map(item => (<CheckList.Item
                                style={{'color': 'black', 'fontSize': '13px'}} key={item}
                                value={item}>{item}</CheckList.Item>))}
                        </CheckList>
                    </div>

                </Flex>
            </Popup>
        </div>
    </Fragment>)
}


export default ProblemPick

